import './index.scss'
import { useBoolean } from 'ahooks'
import { Modal, Drawer } from 'antd'
import { useEffect, useState, lazy, Suspense } from 'react'

import { modelStore, drawerStore, fromStore } from '../Config/zustand'

export const ModelBox = () => {
    const { modelConfig, updateModel } = modelStore()
    const { updateFromData } = fromStore()
    const [Data, setData] = useState()
    const [Title, setTitle] = useState()
    const [Close, setClose] = useState(false)
    const [Width, setWidth] = useState()
    const [Mask, setMask] = useState(true)
    const [Template, setTemplate] = useState()
    const [Open, { setTrue, setFalse }] = useBoolean(false)

    useEffect(() => {
        if (modelConfig.type) {
            setData(modelConfig.data)
            setTitle(modelConfig.title)
            setClose(modelConfig.close)
            setWidth(modelConfig.width || 1000)
            setMask(modelConfig.mask)
            const temp = lazy(() => import(`./page/${modelConfig.type}.jsx`))
            setTemplate(temp)
            setTrue()
        }
        return () => updateFromData({})
    }, [modelConfig, setTrue])


    const onCancel = () => {
        setFalse()
        updateModel({})
    }

    return (
        <Modal
            className="ModelBox"
            centered
            open={Open}
            footer={null}
            destroyOnHidden
            closeIcon={!Close}
            onCancel={onCancel}
            maskClosable={false}
            width={Width}
            mask={Mask}
            title={Title || '操作弹窗'}
            afterOpenChange={e => { if (!e) updateModel({}) }}
        >
            <Suspense>
                {Template && <Template data={Data} Off={setFalse} />}
            </Suspense>
        </Modal>
    )
}

export const DrawerBox = () => {
    const { drawerConfig, updateDrawer } = drawerStore()
    const { updateFromData } = fromStore()
    const [Data, setData] = useState()
    const [Title, setTitle] = useState()
    const [Close, setClose] = useState(false)
    const [Width, setWidth] = useState()
    const [Mask, setMask] = useState(true)
    const [Template, setTemplate] = useState()
    const [placement, setPlacement] = useState()
    const [Open, { setTrue, setFalse }] = useBoolean(false)

    useEffect(() => {
        if (drawerConfig.type) {
            setData(drawerConfig.data)
            setTitle(drawerConfig.title)
            setClose(drawerConfig.close)
            setWidth(drawerConfig.width || 600)
            setMask(drawerConfig.mask)
            setPlacement(drawerConfig.placement || 'right')
            const temp = lazy(() => import(`./page/${drawerConfig.type}.jsx`))
            setTemplate(temp)
            setTrue()
        }
        return () => updateFromData({})
    }, [drawerConfig, setTrue])


    const onCancel = () => {
        setFalse()
        updateDrawer({})
    }


    return (
        <Drawer
            className="DrawerBox"
            push={false}
            centered
            open={Open}
            footer={null}
            destroyOnHidden
            closeIcon={!Close}
            onClose={onCancel}
            maskClosable={false}
            placement={placement}
            width={Width}
            mask={Mask}
            title={Title || '操作抽屉'}
        >
            <Suspense>
                {Template && <Template data={Data} Off={setFalse} />}
            </Suspense>
        </Drawer>
    )
}